<template>
  <div class="index">
    <div class="top-left">
       {{pageInfo}}
    </div>
    <!--上部图标，后期将数据放入js中-->
    <div class="index-icon" ><i class="el-icon-s-marketing"></i></div>
    <div class="index-name">{{pageTitle}}</div>
    <!--用户流失-查询所有用户的流失情况-->
    <div class="index-right">
       <div class="infintInfo">
         <ul style="color: #FFF9EC;text-align: left;">
             <li style="margin-top: 15px;" v-for="(obj,index) in dataOfAll" v-bind:key="obj.index">
             失去用户:{{obj}}
             </li>
         </ul>

         {{dataIndivadual}}
       </div>
    </div>
    <!--用户信用度划分，默认加载为首位height: 620px;
    width: 750px;-->
    <div class="chart-main">
      <div id="main" style="width:700px; height:500px"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
          pageInfo: '服务分析',
          pageTitle:'服务统计',
          list:'用户流失分析',
          dataOfAll:[] ,
        }
    },
    mounted() {
      this.myEcharts();
      this.getAllOrders();
    },
    methods:{

      getAllOrders(){
        //AJAX获取后台数据
        this.$axios
          .post('http://localhost:777/api/Statistic/getLostCus')
          .then(response => {
             this.dataOfAll = response.data.obj.x;
           })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      },

      //Echarts方法(提供类型划分)
      myEcharts(){
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('main'));

         // 指定图表的配置项和数据
         var option = {
           grid: {
               left:35,
               top:150,
           },
           title: {
               show: true, //显示折线图
               text: '服务类型', //标题文字
               //link: 'http://echarts.baidu.com/option.html#title.link', //主标题超文本链接,
               subtext: '按服务类型划分', //副标题
               top:20,
               left: 20, //配置title的位置
               padding: [5,10,5,10] //title的padding值
           },
           tooltip: {},
           toolbox: {
               show: true, //是否显示工具栏组件
               orient: 'vertical', //工具栏icon的布局朝向
               itemSize: 18, //工具栏icon的大小
               itemGap: 20, //item之间的间距
               top:20,
               right: 20, //toolbox的定位位置
               feature: {
                   saveAsImage: { show: true }, //导出图片
                   dataView: { show: true }, //数据视图
                   magicType: { //动态类型切换
                       type: ['line', 'bar', 'stack', 'tiled']
                   },
                   dataZoom: { show: true }, //数据区域缩放
                   restore: { show: true }, //重置
               },
           },
           legend: {
             top:28,
             data:['服务类型']
           },
           xAxis: {
             data: []
           },
           yAxis: {},
           series: [{
             name: '服务类型',
             type: 'bar',
             data: []
           }]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
         //AJAX获取后台数据
         this.$axios
           .post('http://localhost:777/api/Statistic/getSumByType')
           .then(response => {
              myChart.setOption({
                   xAxis: {
                       data: response.data.obj.x
                   },
                   series: [{
                       name: '服务类型',
                       data: response.data.obj.y
                   }]
              });
           })
           .catch(function (error) { // 请求失败处理
             console.log(error);
           });
      },
    }
  }
</script>

<style>
  .index{
    margin: 0 auto;
    height: 700px;
    width: 1250px;
    padding: 16px;
    background-color: #c6e2ff;
  }
  .top-left{
    float: left;
    height: 40px;
    width: 96px;
    /*background-color:#aaaaff;*/
  }
  .index-icon{
    display: inline-block;
    height: 48px;
    height: 40px;
    width: 96px;
  }
  .el-icon-s-marketing{
     font-size: 40px;
  }
  .index-name{
    margin-top: 8px;
    display: inline-block;
  }

  .index-right{
    float: right;
    width: 480px;
    height: 680px;
    background-color: #0074D9;
    border-radius: 4px;
  }

  .chart-main{
    float: left;
    height: 620px;
    width: 750px;
    background-color: #cdffff;
    margin-top: 16px;
  }


</style>
